<template>
  <!---------- 表格数据区域 ----------->
  <TableTreeTemplate :columns="columns" ref="tableRef" />

</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import TableTreeTemplate from '@/components/template/table/table-tree-template.vue';//表格树模版
  import { type CustomTableColumnType } from '@/types/table';//扩展 TableColumnType 定义

  /* [获取表格数据] 1.调用 table-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async () => { 
    await tableRef.value?.getTableData(listAction, listParams, true);
  }; 
  const tableRef = ref<typeof TableTreeTemplate | null>(null);//table-tree-template组件引用，用于执行组件内部方法
  const listAction = 'base.manage.other.CacheService.monitorCaches';//接口 方法
  const listParams = { cache_type: 2 };//接口参数 2取得总后台模块

  onMounted(() => { getTableData(); }); //组件加载完成时，获取表格数据

  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [ 
    {
      title: 'CacheName',
      fixed: 'left',
      dataIndex: 'cache_name',
      width: 180,
    },
    {
      title: '命中率',
      dataIndex: 'hit_rate',
      width: 180,
    },
    {
      title: '加载失败率',
      dataIndex: 'load_failure_rate',
      width: 80,
    },
    {
      title: '加载平均耗时',
      dataIndex: 'average_load_penalty',
      width: 100,
    },
    {
      title: '逐出次数',
      dataIndex: 'eviction_count',
      width: 100,
    },
    {
      title: '命中次数',
      dataIndex: 'hit_count',
      width: 100,
    },
    {
      title: '未命中次数',
      dataIndex: 'miss_count',
      width: 100,
    },
    {
      title: '加载成功次数',
      dataIndex: 'load_success_count',
      width: 100,
    },  
    {
      title: '加载失败次数',
      dataIndex: 'load_failure_count',
      width: 100,
    }, 
    {
      title: '加载总耗时',
      dataIndex: 'total_load_time',
      width: 100,
    },   
    {
      title: '操作',
      dataIndex: 'action',
      buttons: [
        {
          children: () => '清空缓存',
          type: 'link',
          onClick: (record) => onEdit(record.table_config_id),
        },
      ]
    }
  ]

</script>
<style lang="less" scoped>
</style>
